<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流布局插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/lazyload.js"></script>
		<script type="text/javascript" src="js/jq.Masonry.js"></script>
		<script type="text/javascript">
			$(function(){
				var $container = $('#containerPic'),sTimer,count=0; 
    		$container.imagesLoaded(function(){
     			 $container.masonry({
        		 itemSelector: '.lin_itemPic',
        		 columnWidth: 200
      			});
    		});
			$(window).scroll(function scrollHandler(){
				clearTimeout(sTimer);
				sTimer = setTimeout(function() {
					if(window.loaded == 1){$(window).unbind("scroll", scrollHandler);}
					var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();
					if(t+c >= $container.offset().top+$container.height()){loadMore();}
				}, 100);
			});
			var jLoading = $('#loading');
			function loadMore() 
			{
				count++;
				if(count>2)return false;
				var html="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/1.jpg' height='187' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/2.jpg'  height='378' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/3.jpg'  height='393' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/4.jpg'  height='276' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/5.jpg'  height='435' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/6.jpg'  height='387' /></div></div>";
				html+="<div class='lin_itemPic'><div class='lin_pic lazy'><img src='css/images/7.jpg'  height='387' /></div></div>";
				$(html).imagesLoaded(function(){
					$container.append(html).masonry("reload");
						$('.lazy img').lazyload({
     	    				placeholder : "",
							effect : "fadeIn",
							threshold :300
   						});
						$('.lazy').removeClass('lazy');
						jLoading.hide();
				});
			}
			});
		</script>
	</head>
	<body id="main">
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>瀑布流布局插件</h2><span class="file">Define in : jq.Masonry.js</span></div>
			
			<div class="mod_desc">
        			<p>用于瀑布流的图片一定要设置img的height高度，不然会由于浏览器加载速度太快masonry还无法获取高度来计算相关的值
当需要排列图片div时需要调用<br/>
var $container = $('#container');<br/>
$container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 }); });<br/>
调用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )例如：<br/>
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局<br/>
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态<br/>
.masonry( 'layout', $items, callback )// 指定项目的布局<br/>
.masonry( 'option', options ) //设置option<br/>
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序<br/>
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版<br/>
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目。</p>
    			</div>
    			
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
			
			<div class="article_box">
        			<p>下表列出了相关参数介绍。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">itemSelector</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.item</span></td>
                <td class="t_l">
                    <p>class选择器</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">columnWidth</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>一列的宽度</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">isAnimated</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal">true</span></td>
                <td class="t_l">
                    <p>使用jquery的布局变化</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">animationOptions</b></td>
                <td><span class="type">Object</span></td>
                <td><span class="normal">{queue: false, duration: 500 }</span></td>
                <td class="t_l">
                    <p>animate属性渐变效果</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">gutterWidth</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>列的间隙</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">isFitWidth</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>适应宽度</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">isResizableL</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>是否可调整大小</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">isRTL</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>使用从右到左的布局</p>
                </td>
            </tr>
       
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：基本调用</h5>
        
		<p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_itemWrap{position:relative;}
.lin_itemPic{float:left; margin:10px; margin-bottom:0px;margin-right:0px;width:160px;border:1px solid #e0e0e0; background-color:#f0f0f0; padding:10px; zoom:1; overflow:hidden; display:inline;}
.lin_pic{overflow:hidden;width:160px;}
.lin_pic img{width:100%;}
#loading{text-align:center; display:none; color:#F00;}</pre>
        </div>        
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$(function(){
var $container = $('#containerPic'),sTimer; 
$container.imagesLoaded(function(){
$container.masonry({
	itemSelector: '.lin_itemPic',
	columnWidth: 200
 });
});
$(window).scroll(function scrollHandler(){
		clearTimeout(sTimer);
		sTimer = setTimeout(function() {
		if(window.loaded == 1){$(window).unbind("scroll", scrollHandler);}
			var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();
			if(t+c >= $container.offset().top+$container.height()){loadMore();}
				}, 100);
			});
		var jLoading = $('#loading');
		function loadMore() 
		{
			//html这个就是你AJAX需要读取构造的数据
			$container.append(html).masonry("reload");
			jLoading.hide();
		}
	});</pre>
        </div>        
        
        <div class="demo_box">
            
            <div class="lin_itemWrap" id="containerPic">
              	<div class="lin_itemPic">
              	   <div class="lin_pic"><img src="css/images/1.jpg"  height="187"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="css/images/2.jpg" height="378" /></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="css/images/3.jpg" height="393"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="css/images/4.jpg" height="276"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="pic"><img src="css/images/5.jpg" height="435"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="css/images/6.jpg" height="387"/></div>
                </div>
        	    <div class="lin_itemPic">
              	  <div class="lin_pic"><img src="css/images/7.jpg" height="387"/></div>
                </div> 
            </div>
            <div id="loading">loading</div>
            
        </div>
        
    </div>
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">jq.Masonry</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
